<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气网</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="nav-inner">
        <div class="nav">
            <ul class="clearfix">
                <li class="li-1"><a href="">首页</a></li>
                <li><a href="">预报</a></li>
                <li><a href="">雷达</a></li>
                <li><a href="">云图</a></li>
                <li><a href="">临近预报</a></li>
                <li><a href="">专业产品</a></li>
                <li><a href="">资讯</a></li>
                <li><a href="">生活</a></li>
                <li><a href="">交通</a></li>
                <li><a href="">产创平台</a></li>
                <li><a href="">河北站</a></li>
                <li><a href="">更多</a></li>
            </ul>
        </div>
    </div>
    <div class="header-inner">
        <div class="header clearfix">
            <div class="header-left">
                <a href=""><img src="img/logo.jpg" alt=""></a>
            </div>
            <div class="header-right">
                <input type="search" placeholder="输入查找的城市" id="ipt">
                <img src="img/search.jpg" alt="">
            </div>
        </div>
    </div>

    <div class="main clearfix">
        <div class="main-left">
            <div class="main-1">
                <div>城市：<span id="city"></span></div>
                <ul class="clearfix">
                    <li class="sky sky1">
                        <a href="#">
                            <span id="date1" class="a"></span>
                            <span id="now1" class="b"></span>
                            <p><span class="sp-1"><span id="tmp1"></span>℃</span>/<span class="sp-2"><span id="tmp2"></span>℃</span></p>
                            <span class="sp_1"><span id="wind1"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date2" class="a"></span>
                            <span id="now2" class="b"></span>
                            <p><span class="sp-1"><span id="tmp3"></span>℃</span>/<span class="sp-2"><span id="tmp4"></span>℃</span></p>
                            <span class="sp_1"><span id="wind2"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date3" class="a"></span>
                            <span id="now3" class="b"></span>
                            <p><span class="sp-1"><span id="tmp5"></span>℃</span>/<span class="sp-2"><span id="tmp6"></span>℃</span></p>
                            <span class="sp_1"><span id="wind3"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date4" class="a"></span>
                            <span id="now4" class="b"></span>
                            <p><span class="sp-1"><span id="tmp7"></span>℃</span>/<span class="sp-2"><span id="tmp8"></span>℃</span></p>
                            <span class="sp_1"><span id="wind4"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date5" class="a"></span>
                            <span id="now5" class="b"></span>
                            <p class="p"><span class="sp-1"><span id="tmp9"></span>℃</span>/<span class="sp-2"><span id="tmp10"></span>℃</span></p>
                            <span class="sp_1"><span id="wind5"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date6" class="a"></span>
                            <span id="now6" class="b"></span>
                            <p><span class="sp-1"><span id="tmp11"></span>℃</span>/<span class="sp-2"><span id="tmp12"></span>℃</span></p>
                            <span class="sp_1"><span id="wind6"></span>级</span>
                        </a>
                    </li>
                    <li class="sky">
                        <a href="">
                            <span id="date7" class="a"></span>
                            <span id="now7" class="b"></span>
                            <p><span class="sp-1"><span id="tmp13"></span>℃</span>/<span class="sp-2"><span id="tmp14"></span>℃</span></p>
                            <span class="sp_1"><span id="wind7"></span>级</span>
                        </a>
                    </li>
                </ul>
            </div>


            <div class="main-2">
                <span>分时段预报</span>
                <ul class="clearfix">
                    <li class="li">
                        <p id="hour1" class="c"><span class="h"></span></p>
                        <p class="p"><span id="hour_1" class="s_1"></span>℃</p>
                        <p id="dir1" class="p1"></p>
                        <p class="p"><span id="sc1" class="s1"></span>级</p>
                    </li>
                    <li class="li">
                        <p id="hour2" class="c"><span class="h"></span></p>
                        <p class="p"><span id="hour_2" class="s_1"></span>℃</p>
                        <p id="dir2" class="p1"></p>
                        <p class="p"><span id="sc2" class="s1"></span>级</p>
                    </li>
                    <li class="li">
                        <p id="hour3" class="c"><span class="h"></span></p>
                        <p class="p"><span id="hour_3" class="s_1"></span>℃</p>
                        <p id="dir3" class="p1"></p>
                        <p class="p"><span id="sc3" class="s1"></span>级</p>
                    </li>
                    <li class="li">
                        <p id="hour4" class="c"><span class="h"></span></p>
                        <p class="p"><span id="hour_4" class="s_1"></span>℃</p>
                        <p id="dir4" class="p1"></p>
                        <p class="p"><span id="sc4" class="s1"></span>级</p>
                    </li>
                </ul>
            </div>

            <div class="main-3">
                <span class="sp">生活指数</span>
                <ul class="clearfix">
                    <li class="li-1">
                        <span class="span">紫外线指数</span>
                        <span id="brf" class="sp-1"></span>
                        <span id="txt" class="sp-2"></span>
                    </li>
                    <li class="li-1">
                        <span class="span">感冒指数</span>
                        <span id="brf1" class="sp-1"></span>
                        <span id="txt1" class="sp-2"></span>
                    </li>
                    <li class="li-1">
                        <span class="span">旅游指数</span>
                        <span id="brf2" class="sp-1"></span>
                        <span id="txt2" class="sp-2"></span>

                    </li>
                    <li class="li-1">
                        <span class="span">穿衣指数</span>
                        <span id="brf3" class="sp-1"></span>
                        <span id="txt3" class="sp-2"></span>
                    </li>
                    <li class="li-1">
                        <span class="span">洗车指数</span>
                        <span id="brf4" class="sp-1"></span>
                        <span id="txt4" class="sp-2"></span>
                    </li>
                    <li class="li-1">
                        <span class="span">空气污染扩散指数</span>
                        <span id="brf5" class="sp-1"></span>
                        <span id="txt5" class="sp-2"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-right">
            <div class="main-right-1">
                <img src="img/hbtg.jpg" alt="">
            </div>
            <div class="main-right-2">
                <div class="title">
                    <h1>气象服务</h1>
                </div>
                <div class="qxfw">
                    <h1><a href="">气象服务热线</a></h1>
                    <p>拨打400-6000-121进行气象服务咨询、建议、合作与投诉</p>
                    <h1>天气预报电话查询</h1>
                    <p>拨打12121或96121进行天气预报查询</p>
                    <h1><a href="">手机查询</a></h1>
                    <p>随时随地通过手机登录中国天气WAP版查看各地天气资讯</p>
                    <img src="img/img-qrcode-2.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="footer-inner">
        <div class="footer">
            <p> 中国天气网版权所有，未经书面授权禁止使用 &nbsp;&nbsp;&nbsp;&nbsp;Copyright©<a href="">中国气象局公共气象服务中心</a> All Rights Reserved (2008-2019)</p>
        </div>
    </div>
</body>
<script src="js/script.js"></script>
</html>